<template>
    <div class="digital-record">
        <div class="title">昨日数据 <span class="tips">数据更新至2020-03-10</span></div>
        <div class="mode"><i class="iconfont iconmonitor"></i><i class="iconfont iconmobile"></i></div>
        <div class="filter">
            <span class="name">电脑端</span>
            <el-select v-model="value" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
            <el-select v-model="value" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
            <el-select v-model="value" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
        </div>
        <div class="records clearfix">
            <div class="record">
                <div class="name">点击人数</div>
                <div class="total">134556789</div>
                <div class="day decrease"><i>日</i><span>27.32%</span></div>
                <div class="week"><i>周</i><span>27.32%</span></div>
                <div class="month"><i>月</i><span>27.32%</span></div>
            </div>
            <div class="record">
                <div class="name">点击次数</div>
                <div class="total">134556789</div>
                <div class="day decrease"><i>日</i><span>27.32%</span></div>
                <div class="week"><i>周</i><span>27.32%</span></div>
                <div class="month"><i>月</i><span>27.32%</span></div>
            </div>
        </div>
    </div>
</template>
<script>
export default{
    data(){
        return {
            options:[{}],
            value:'',
            label:''
        }
    }
}
</script>  
<style lang="scss" scoped>
    .digital-record{
        display: inline-block;
        width:calc((100% - 60px)/2);
        margin:0 15px;
        position: relative;
        padding:30px 20px 30px 30px;
        background: #fff;
        border-radius: 4px;
        .title{
            font-size: 18px;
            color: #0F1B41;
            line-height: 18px;
            font-weight: 700;
            .tips{
                display: inline-block;
                vertical-align: top;;
                margin-left:16px;
                font-weight: 400;
                font-size: 13px;
                color: #5A7180;
                line-height: 18px;
            }
        }
        .mode{
            position: absolute;
            top:20px;
            right:23px;
            .iconfont{
                font-size:28px;
                color:#5468FF;
            }
        }
        .filter{
            margin-top:23px;
            font-size: 0;
            .name{
                display: inline-block;
                margin-right:20px;
                height:36px;
                line-height: 36px;
                font-size: 14px;
                color: #5A7180;
            }
            .el-select{
                margin-right:18px;
                width:calc((100% - 100px)/3);
                &:last-child{
                    margin-right:0;
                }
            }
        }
        .records{
            margin-top:40px;
        }
        .record{
          float: left;
          width:50%;
          text-align: center;
          .name{
              display: block;
              font-size: 14px;
              color: #5A7180;
              line-height: 14px;
          }
          .total{
              margin-top:18px;
              display: block;
              font-size: 30px;
              color: #0F1B41;
              line-height: 30px;
          }
          .day,.week,.month{
              display:block;
              margin-top:14px;
              font-size: 14px;
              line-height: 14px;
              span{
                  position: relative;
                  display: inline-block;
                  padding-right:20px;
                  color: #1AAD19;
                  &:after{
                      position: absolute;
                      top:0;
                      right:0;
                      content:"↑";
                  }
              }
              i{
                  margin-right:16px;
                  display: inline-block;
                  vertical-align: top;
                  font-size: 14px;
                  color: #5A7180;
              }
              &.decrease{
                  span{
                      color: #E15F63;
                      &:after{
                          content:"↓";
                      }
                  }
              }
          }
        }
    }
</style>
